<template>
  <div>
    <base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-7"></base-header>
    <notifications></notifications>
    <div class="container-fluid mt--7">
      <div class="card shadow">
        <card type="frame">{{title}}</card>
        <div class="card-header border-0">
          <div>
            <div class="form-group row">
              <label class="col-md-4 col-form-label form-control-label">已经关联的活动内容</label>
              <div class="col-md-8">
                <base-input v-model="model.linkedactivitytitle"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-4 col-form-label form-control-label">正在关联的图文内容</label>
              <div class="col-md-8">
                <base-input v-model="model.linkedartstitle"></base-input>
              </div>
            </div>

            <div class="form-group row">
              <label class="col-md-4 col-form-label form-control-label">选择活动 [一个活动只能绑定到一个图文中]</label>
              <div class="col-md-8">
                <select v-model="this.model.selected" @change="selectFn($event)">
                  <!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据-->
                  <option v-for="item in this.model.activityitems" v-bind:value="item.id" >{{item.title}}</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="example-time-input" class="col-md-4 col-form-label form-control-label"></label>
              <div class="col-md-8">
                <base-button type="success" @click="bindActivityToArticles()">
                  <i class="ni ni-send"></i>绑定朗读活动
                </base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 import { findLangduTypeActivityApi,bindActivityRpArticleApi,findBindActivityApi } from "~/config/api/ldactivityinfoservice";
export default {
  asyncData() {},
  components: {},
  data() {
    return {
      title: "给小队图文关联一个朗读活动内容",
      showSaveBtn: false,
      showUpdateBtn: false,
      model: {
        linkedartstitle: "",
        linkedactivitytitle:"",
        activityid: "0",
        articleid: "",
        selectItem: "",
        selected:"1",
        activityitems: [{
          "id":"0",
          "title":"请选择活动"
        }]
      }
    };
  },
  created: function() {
    this.model.articleid = this.$route.query.articleid;
    this.model.linkedartstitle=this.$route.query.title;
  },
  mounted: function() {
    this.findBindActivity();
    this.findLangduTypeActivity();
  },
  methods: {
    selectFn: function(e) {
      this.model.activityid = e.target.value;
    },

    async findLangduTypeActivity() {
      let params = {};
      await findLangduTypeActivityApi(params).then(res => {
        if (res.sucflag) {
          for (var i = 0; i < res.beanlist.length; i++) {
            let data = {
              id: res.beanlist[i].id,
              title: res.beanlist[i].title
            };
            this.model.activityitems.push(data);
          }
        }
      });
    },

    //查询这片文章关联的互动话题
    async findBindActivity() {
      let params = {
        rpydarticleid: this.model.articleid
      };
      await findBindActivityApi(params).then(res => {
        if (res.sucflag) {
          this.model.linkedactivitytitle = res.bean.title;
        }
      });
    },

    /**
     * 更新朗读活动到图文
     */
    async bindActivityToArticles() {
      if(this.model.activityid=="0"){
        return false;
      }
      let params = {
        id: this.model.activityid,
        rpydarticleid: this.model.articleid
      };
      await bindActivityRpArticleApi(params).then(res => {
        if (res.sucflag) {

          this.$notify({
            type: "success",
            verticalAlign: "top",
            horizontalAlign: "center",
            message: "绑定成功"
          });
        }
      });
    }
  },
  layout: "DashboardLayout"
};
</script>
